<template>
  <div id="customerDetailsHome" class="customerDetailsHome">
	  <group v-if="hasTable == false && doShow == true">
		  <h3 style="text-align: center">宝贝还没有成长计划表!</h3>
		  <x-button type="primary" @click.native="createCustomerEx">+点击创建</x-button>
	  </group>
	  <group v-if="hasTable == true && doShow == true" label-width="4.5em" label-margin-right="2em" label-align="left">
		  <form-preview class="customerExTable"
		                header-label="成长计划表"
		                :body-items="list"
		                :footer-buttons="raiseUpBtn"
		                label-algin = "justify"
		                name="raiseUp"></form-preview>
	  </group>
  </div>
</template>

<script>
	import NetWorking from '../../../../../utils/networking'
  import { Group, Cell, XButton, FormPreview} from 'vux'
  export default {
    name: "customer-details-home",
    components: {
      Cell,
      Group,
	    XButton,
	    FormPreview
    },
    beforeCreate: function () {
      let _this = this
	    let url = 'ylyn/getCustomerDetailsById'

	    NetWorking.doGet(
	    	url,
		    null,
		    {
		    	params: {
		    		customer_id: this.$route.params.id
			    }
		    }
	    ).then(
	    	response => {
	    		let rs = response.data;
	    		if(rs.error_code == 0){
				    _this.hasTable = true
				    _this.customerPlanDetails = rs.ylyn_details
			    }else if(rs.error_code == 22101){
				    _this.hasTable = false
			    }else{
	    			alert(rs.error_message)
			    }
			    _this.doShow = true
		    }
	    )
    },
    data () {
      return {
	      doShow: false,
	      hasTable: false,
	      customerPlanDetails: '',
	      list: [{
		      label: '需求',
		      value: '',
	      }, {
		      label: '兴趣',
		      value: ''
	      }, {
		      label: '性格',
		      value: ''
	      }, {
		      label: '教育决策',
		      value: ''
	      }, {
		      label: '家庭住址',
		      value: ''
	      }, {
		      label: '喜欢颜色',
		      value: ''
	      }, {
		      label: '是否剖腹产',
		      value: ''
	      }, {
		      label: '语言发育',
		      value: ''
	      }, {
		      label: '吐字清晰',
		      value: ''
	      }, {
		      label: '认生程度',
		      value: ''
	      }, {
		      label: '手部精细',
		      value: ''
	      }, {
		      label: '隔代代养',
		      value: ''
	      }, {
		      label: '哭闹表达需求',
		      value: ''
	      }, {
		      label: '哭多久妥协',
		      value: ''
	      }, {
		      label: '玩具多少种',
		      value: ''
	      }, {
		      label: '是否母乳',
		      value: ''
	      }, {
		      label: '是否游泳',
		      value: ''
	      }, {
		      label: '接触电子产品',
		      value: ''
	      }, {
		      label: '接触哪些',
		      value: ''
	      }, {
		      label: '接触频次',
		      value: ''
	      }, {
		      label: '是否绘本阅读',
		      value: ''
	      }, {
		      label: '阅读频次',
		      value: ''
	      }, {
		      label: '反应能力',
		      value: ''
	      }, {
		      label: '自信心',
		      value: ''
	      }, {
		      label: '抗挫能力',
		      value: ''
	      }],
	      raiseUpBtn: [{
		      style: 'primary',
		      text: '编辑',
		      onButtonClick: () => {
			      this.$router.push({ name: "updateCustomerExDetails", params: { id: this.$route.params.id }})
		      }
	      }]
      }
    },
	  watch: {
		  customerPlanDetails: function () {
			  this.list[0].value = this.customerPlanDetails.request
			  this.list[1].value = this.customerPlanDetails.interests
			  this.list[2].value = this.customerPlanDetails.kid_character
			  this.list[3].value = this.customerPlanDetails.decision_made
			  this.list[4].value = this.customerPlanDetails.address
			  this.list[5].value = this.customerPlanDetails.favorite_color
			  this.list[6].value = this.changeToYesNo(this.customerPlanDetails.is_cesarean)
			  this.list[7].value = this.customerPlanDetails.language
			  this.list[8].value = this.changeToYesNo(this.customerPlanDetails.is_clear_speak)
			  this.list[9].value = this.changeToYesNo(this.customerPlanDetails.is_shy)
			  this.list[10].value = this.customerPlanDetails.hand_details
			  this.list[11].value = this.changeToYesNo(this.customerPlanDetails.is_grand_raise)
			  this.list[12].value = this.changeToYesNo(this.customerPlanDetails.is_cry_for_request)
			  this.list[13].value = this.customerPlanDetails.compromise
			  this.list[14].value = this.customerPlanDetails.dolls_number
			  this.list[15].value = this.changeToYesNo(this.customerPlanDetails.is_breast_fed)
			  this.list[16].value = this.changeToYesNo(this.customerPlanDetails.is_swimming)
			  this.list[17].value = this.changeToYesNo(this.customerPlanDetails.is_touch_edevice)
			  this.list[18].value = this.customerPlanDetails.edevice_type
			  this.list[19].value = this.customerPlanDetails.edevice_frequency
			  this.list[20].value = this.changeToYesNo(this.customerPlanDetails.is_reading_book)
			  this.list[21].value = this.customerPlanDetails.reading_frequency
			  this.list[22].value = this.customerPlanDetails.reaction_ability
			  this.list[23].value = this.customerPlanDetails.confidence
			  this.list[24].value = this.customerPlanDetails.setback_resist
		  }
	  },
	  methods: {
		  createCustomerEx: function () {
			  this.$router.push({ name: "newCustomerExDetails", params: { id: this.$route.params.id }})
		  },
		  changeToYesNo(value){
		  	if(value){
		  		return '是'
			  }else{
		  		return '否'
			  }
		  }
	  }
  }
</script>

<style>
	.customerDetailsCell{
		padding: 0px 15px !important;
	}

	.customerDetailsHome{
		margin-bottom: 100px;
	}

	.customerExTable > .weui-form-preview__bd > .weui-form-preview__item > .weui-form-preview__label {
		min-width: 6em;
	}

	.customerExTable > .weui-form-preview__bd > .weui-form-preview__item > .weui-form-preview__value {
		padding-left: 20px;
	}
</style>
